﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Word.aspx.cs" Inherits="WordWars.Word" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Word Definition - <%# Request.QueryString["word"] %></title>
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
    <form id="form1" runat="server">
    <div align="center">
        <h1 runat="server" id="h1Word"></h1>
        <hr width="80%" />
        <h2>Images</h2>
        <asp:SqlDataSource runat="server" ID="sqlImages" ConnectionString='<%$ ConnectionStrings:Con %>' SelectCommand="SELECT * FROM [Images] WHERE ([Word] = @Word)">
            <SelectParameters>
                <asp:QueryStringParameter QueryStringField="word" Name="Word" Type="String"></asp:QueryStringParameter>
            </SelectParameters>
        </asp:SqlDataSource>
        <asp:Repeater runat="server" ID="rptImages" >
            <HeaderTemplate>
                <div id="myCarousel" class="carousel slide">
                    <!-- Carousel items -->
                    <div class="carousel-inner">
            </HeaderTemplate>
            <ItemTemplate>
                <div class="item">
                    <asp:Image runat="server" ID="Image" Width="250" Height="250" ImageUrl='<%# "~/img/" + Eval("Word") + "/" + Eval("ImageURL") %>' />
                </div>
            </ItemTemplate>
            <FooterTemplate>
                    </div>
                    <!-- Carousel nav -->
                    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
                    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
                </div>
            </FooterTemplate>
        </asp:Repeater>

        <h2>Videos</h2>
        <asp:SqlDataSource runat="server" ID="sqlVideos" ConnectionString='<%$ ConnectionStrings:Con %>' SelectCommand="SELECT * FROM [Videos] WHERE ([Word] = @Word)">
            <SelectParameters>
                <asp:QueryStringParameter QueryStringField="word" Name="Word" Type="String"></asp:QueryStringParameter>
            </SelectParameters>
        </asp:SqlDataSource>
        <asp:Repeater runat="server" ID="rptVideos" DataSourceID="sqlVideos">
            <ItemTemplate>
                <iframe width="420" height="315" src='<%# "http://www.youtube.com/embed/" + Eval("YoutubeLink") %>' frameborder="0" allowfullscreen></iframe>
            </ItemTemplate>
        </asp:Repeater>

        <h2>Articles</h2>
        <asp:SqlDataSource runat="server" ID="sqlArticles" ConnectionString='<%$ ConnectionStrings:Con %>' SelectCommand="SELECT * FROM [Articles] WHERE ([Word] = @Word)">
            <SelectParameters>
                <asp:QueryStringParameter QueryStringField="word" Name="Word" Type="String"></asp:QueryStringParameter>
            </SelectParameters>
        </asp:SqlDataSource>
        <asp:Repeater runat="server" ID="rptArticles" DataSourceID="sqlArticles">
            <ItemTemplate>
                <a href='<%# Eval("Article") %>' target="_blank"><%# Eval("Article").ToString() %></a><br />
            </ItemTemplate>
        </asp:Repeater>
        
        <hr width="80%" />

        <asp:Button runat="server" ID="btnBack" Text="Back" CssClass="btn" />
    </div>
    </form>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.carousel').carousel();
        });
    </script>
</body>
</html>
